<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="bjf2f2f2">
<div class="width_100bfb">
    <div class="header">
        <div class="width_1200">
            <div class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></div>
            <div class="header_nav">
                <li class="li_01"><a href="https://hao.qq.com/" class="this">我要拍片</a></li>
                <li class="li_01"><a href="https://hao.qq.com/">人脉资源</a></li>
                <li class="li_01"><a href="https://hao.qq.com/">器材租赁</a></li>
                <li class="li_01"><a href="https://hao.qq.com/">服装租赁</a></li>
                <li class="li_01"><a href="https://hao.qq.com/">道具租赁</a></li>
                <li class="li_01"><a href="http://www.cctv.com/">车辆租赁</a></li>
                <li class="li_01"><a href="http://www.cctv.com/">招募建组</a></li>
                <li class="li_01"><a href="http://www.cctv.com/">人才孵化</a></li>
                <li class="li_01"><a href="http://www.cctv.com/">项目孵化</a></li>
            </div>

    </div>
    </div>
</div>
<div id="banner">
    <ul>
        <li><img src="images/banner_03.jpg" alt=""></li>
        <li><img src="images/banner_04.jpg" alt=""></li>
        <li><img src="images/banner_03.jpg" alt=""></li>
        <li><img src="images/banner_04.jpg" alt=""></li>
    </ul>
    <div class="circle">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<!--幻灯结束全屏排残图片片开始-->
<div class="width_100bfb">
    <div class="center">
    <div class="index_nr01 clear">
        <a href="#"><img src="images/ad_01.jpg" /></a>
        <a href="#"><img src="images/ad_02.jpg" /></a>
        <a href="#"><img src="images/ad_03.jpg" /></a>
        <a href="#"><img src="images/ad_04.jpg" /></a>
    </div>
    </div>
    <div class="clear"></div>
</div>
<div class="width_100bfb">
    <div class="footer_01">
        <div class="width_1200">
            <ul class="ul_01"><a href="http://www.cctv.com/"><img src="images/logo_02.png" /></a></ul>
            <ul class="ul_02">
                <li>
                    <a href="https://hao.qq.com/">关于我们</a><span>|</span><a href="http://news.sohu.com/">隐藏政策</a><span>|</span><a href="http://www.cctv.com/">使用条款</a><span>|</span><a href="http://www.cctv.com/">销售政策</a><span>|</span>
                    <a href="http://www.cctv.com/">网站地图</a><span>|</span><a href="http://news.sohu.com/">APP下载</a>
                </li>
            </ul>
            <ul class="ul_03">Copyight@121255保留所有权利</ul>
            <ul class="ul_03">京公安:2222号,ICP:42423号</ul>
        </div>
    </div>
    <div class="clear"></div>
</div>
</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        //鼠标移入大盒子让箭头显示，移出消失
        $("#banner").hover(function () {
            $("#banner .prev,#banner .next").fadeIn();
            clearInterval(timer);
        },function () {
            $("#banner .prev,#banner .next").fadeOut();
            timer = setInterval(lunbo,2000);
        });

        function silder(index) {
            //当鼠标移入的时候，给当前移入的元素添加类名
            //把当前移入元素上下同级的所有元素的类名移除
            $(".circle span").eq(index).addClass("active").siblings().removeClass("active");
            //改变图片
            $("#banner ul li").eq(index).fadeIn().siblings().fadeOut();
        }

        //初始化一个全局变量
        var _index = 0;
        var timer = null;
        $(".circle span").mouseover(function () {
            //获取当前移入元素的下标
            _index = $(this).index();
            silder(_index);
        })

        function lunbo() {
            if(_index == 3){
                _index = 0;
            }else{
                _index++;
            }
            silder(_index);
        }
        //开启定时器
        timer = setInterval(lunbo,2000);
        //点击切换到下一张
        $("#banner .next").click(function () {
            if(_index == 3){
                _index = 0;
            }else{
                _index++;
            }
            silder(_index);
        })
        //点击切换到上一张
        $("#banner .prev").click(function () {
            if(_index == 0){
                _index = 3;
            }else{
                _index--;
            }
            silder(_index);
        })
    })

</script>
